<template>
  <!--舆情分类统计-->
  <div id="div-right3">
    <div class="div-right-title">
      <div class="div-right-title-box"></div>舆情分类统计</div>
    <div class="div-right-tools">
      <div class="div-right-time-tabs pointer f-r" title="舆情分类统计">
        <div :class="{'tab-checked':isActive == 'M'}"
             @click="TimeClick('M')"
             class="div-right-time-tab f-r" >本月</div>
        <div :class="{'tab-checked':isActive == 'W'}"
             @click="TimeClick('W')"
          class="div-right-time-tab f-r">本周</div>
      </div>
    </div>
    <div id="div-echarts-public-sentiment-type" class="div-right-content" style="height: 280px;">

    </div>
  </div>
</template>

<script>
// 引入echarts
import echarts from 'echarts'

export default {
  name: 'classification',
  data () {
    return {
      isActive: 'W' // 'M' | 'W'
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getEchartsData()
    },
    // 表格请求
    getEchartsData () {
      this.$axios({
        url: this.Monitor +
          '/monitorStatistics/categoryPublicSentimentStatic/' +
          this.isActive + // W：周，M：月
          '/' + '9BECB65D-4E52-4039-993B-369DAA145EAF', // stationId
        method: 'get'
      }).then(res => {
        let data = []
        let xValue = []
        let yValue = []
        let max = 0
        this.seriesdatavalue = []
        data = res.data.data.sort(function (a, b) { return b.num - a.num })
        max = data[0].num
        data.map(item => {
          xValue.push(item.num)
          yValue.push({
            text: item.typeName,
            max: max
          })
        })
        this.drawEcharts(xValue, yValue)
        console.log(res.data.data)
      }).catch(err => {
        console.log(err, '舆情分类统计')
      })
    },
    drawEcharts (xValue, yValue) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('div-echarts-public-sentiment-type'))
      // option
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        radar: [
          {
            indicator: yValue,
            name: {
              textStyle: {
                color: '#ffffff' // 字体颜色  必须写在name里面
              },
              formatter: (text) => {
                text = text.replace(/\S{8}/g, function (match) {
                  // console.log(match)
                  return match + '\n'
                })
                return text
              }
            },

            splitArea: {
              show: false // 背景透明
            },

            splitLine: {
              lineStyle: {
                color: '#026CC4',
                opacity: 0.5
              }
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: '#026CC4',
                opacity: 0.5
              }
            },
            radius: 80
            // center: ['25%','40%'],
          }
        ],
        series: [
          {
            type: 'radar',
            tooltip: {
              trigger: 'item'
            },
            itemStyle: {
              normal: {
                borderColor: '#026CC4'
              }
            },
            lineStyle: {
              normal: {
                color: '#026CC4'
              }
            },
            areaStyle: {
              normal: {
                color: '#026CC4'
                // opacity: 0.5
              }
            },

            data: [
              {
                value: xValue, // [60, 73, 85, 40, 50],
                name: '舆情分类统计'
              }
            ]
          }
        ]
      }
      myChart.setOption(option)
      // 根据窗口的大小变动图表
      window.onresize = function () {
        myChart.resize()
      }
    },
    // 周和月的切换
    TimeClick (str) {
      this.isActive = str
      this.getEchartsData()
    }
  }
}
</script>

<style scoped>

</style>
